<template>
  <div class="link-lists-table" v-loading="initLoading">
    <template v-for="(item, index) in linkLists" :key="index">
      <div class="list-table-item">
        <div>
          {{ item.title }}
        </div>
        <div class="list-table-item-list">
          <template v-for="(items, idx) in item.data" :key="idx">
            <div
              class="list-table-item-page"
              @click="selectedItem(items)"
              :class="
                selectedActive == items.key &&
                (!selectedData.value || selectedData.value == items.value)
                  ? 'active'
                  : ''
              "
            >
              {{ items.title }}
            </div>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts">
export default {
  name: "storeDiyLinkModalDefault",
};
</script>
<script setup lang="ts">
import { ref, getCurrentInstance, watch, onMounted } from "vue";

import { getDiyLinkList } from "@/api/store/diy_page";
import { diyLinkType, Result, ResultError } from "@/types";

const props = withDefaults(
  defineProps<{
    linkItem?: diyLinkType;
  }>(),
  {
    linkItem: () => {
      return {};
    },
  }
);

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const linkLists = ref<
  Array<{
    title: string;
    data: Array<{
      key: string;
      title: string;
      [key: string]: string | number | undefined;
    }>;
  }>
>();

const toInit = () => {
  initLoading.value = true;
  getDiyLinkList({
    type: "default",
  })
    .then((res: Result) => {
      linkLists.value = res.data;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const emit = defineEmits(["change"]);

const selectedActive = ref<number | string>(props.linkItem?.value || "");

const selectedData = ref<diyLinkType>(props.linkItem);

const selectedItem = (item: {
  title: string;
  key: string;
  value?: number | string;
}) => {
  selectedActive.value = item.key;
  selectedData.value = {
    type: "default",
    title: item.title,
    desc: "商城链接",
    key: item.key,
    value: item.value || 0,
  };
  emit("change", selectedData.value);
};

onMounted(() => {
  toInit();
});
</script>

<style scoped>
.list-table-item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 20px 0;
}
.list-table-item-page {
  font-size: 12px;
  padding: 8px 15px;
  margin-right: 10px;
  margin-bottom: 10px;
  color: #000;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
}
.list-table-item-page:hover {
  color: var(--base-default);
  border: 1px solid var(--base-default);
  background: var(--el-color-primary-light-9);
}
.list-table-item-page.active {
  color: #fff;
  border: 1px solid var(--base-default);
  background: var(--base-default);
}
</style>